<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/center.css">
</head>
<body>
     <!-- --------------------------- 1 网页头部模块 -->
     <header>
        <!-- 1.1 快捷菜单模块 -->
        <div class="xtx-shortcut">
         <nav class="container">
            <div class="fr">
                <ul>
                    <li><a href="javascript:;">请先登录</a>|</li>
                    <li><a href="javascript:;">免费注册</a>|</li>
                    <li><a href="javascript:;">我的订单</a>|</li>
                    <li><a href="javascript:;">会员中心</a>|</li>
                    <li><a href="javascript:;">帮助中心</a>|</li>
                    <li><a href="javascript:;">在线客服</a>|</li>
                    <li><a href="javascript:;">手机版</a></li>
                </ul>
            </div>
         </nav>
        </div>
        <!-- 1.2 主导航模块 -->
        <div class="xtx-main-nav container">
            <!-- logo -->
            <div class="logo fl">
                <a href="javascript:;">优易电商</a>
            </div>
            <!-- 导航 -->
            <nav class="fl">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="javascript:;">生鲜</a></li>
                    <li><a href="javascript:;">美食</a></li>
                    <li><a href="javascript:;">餐厨</a></li>
                    <li><a href="javascript:;">电器</a></li>
                    <li><a href="javascript:;">居家</a></li>
                    <li><a href="javascript:;">洗护</a></li>
                    <li><a href="javascript:;">孕婴</a></li>
                    <li><a href="javascript:;">服装</a></li>
                  </ul>
            </nav>
            <!-- 搜索 -->
            <div class="search fl">
                <input type="search" placeholder="搜一搜">
            </div>
            <!-- 购物车模块 -->
            <div class="cart fl">
                <span>2</span>
            </div>
        </div>  <!-- 1.2 ending -->
     </header>
     <!-- --------------------------- 中间内容区域 -->
     <div class="xtx-center-body">
       <div class="container">
           <!--  --------------------- 侧边栏区域 -->
           <div class="aside">
               <!-- 我的账户 -->
               <dl>
                   <dt>我的账户</dt>
                  <dd class="active"><a href="javascript:;"><em></em>个人中心</a></dd>
                  <dd><a href="javascript:;">消息通知</a></dd>
                  <dd><a href="javascript:;">个人信息</a></dd>
                  <dd><a href="javascript:;">安全设置</a></dd>
                  <dd><a href="javascript:;">地址管理</a></dd>
                  <dd><a href="javascript:;">我的积分</a></dd>
                  <dd><a href="javascript:;">我的足迹</a></dd>
                  <dd><a href="javascript:;">邀请有礼</a></dd>
                  <dd><a href="javascript:;">幸运抽奖</a></dd>
               </dl>
               <!-- 交易管理 -->
               <dl>
                <dt>交易管理</dt>
               <dd><a href="javascript:;">我的订单</a></dd>
               <dd><a href="javascript:;">优惠券</a></dd>
               <dd><a href="javascript:;">礼品卡</a></dd>
               <dd><a href="javascript:;">评价晒单</a></dd>
               <dd><a href="javascript:;">售后服务</a></dd>
               
            </dl>
               <!-- 我的收藏 -->
               <dl>
                <dt>我的收藏</dt>
               <dd><a href="javascript:;">收藏的商品</a></dd>
               <dd><a href="javascript:;">收藏的专题</a></dd>
               <dd><a href="javascript:;">关注的品牌</a></dd>
                      
            </dl>
               <!-- 帮助中心 -->
               <dl>
                <dt>帮助中心</dt>
               <dd><a href="javascript:;">帮助中心</a></dd>
               <dd><a href="javascript:;">在线客服</a></dd>
        
            </dl>
           </div>
           <!-- --------------------- 右侧内容区域 -->
           <div class="main">
               <!-- 个人信息-->
               <div class="personal-info">
                   <div>
                       <img src="./uploads/avatar_1.png" alt="">
                       <span>张小花</span>
                    </div>
                    <!-- 右侧 -->
                   <div>
                     <a href="javascript:;">
                         <img src="./images/vip.png" alt="">
                         <p>会员中心</p>
                     </a> 
                     <a href="javascript:;">
                        <img src="./images/safe.png" alt="">
                        <p>安全设置</p>
                    </a> 
                    <a href="javascript:;">
                        <img src="./images/address.png" alt="">
                        <p>地址管理</p>
                    </a> 
                   </div>
               </div>
               <!-- 个人订单 -->
               <div class="order panel">
                   <!-- 标题 -->
                   <div class="panel-title">
                    <!-- 左侧 -->
                    <h4>我的订单</h4>
                    <!-- 右侧 -->
                    <a href="javascript:;">查看全部 ></a>
                   </div>
                   <!-- 内容 -->
                   <div class="content">
                   <ul>
                       <li>
                        <div class="goods">
                            <a href="javascript:;"><img src="./uploads/order_goods_1.jpg" alt=""></a>
                            <div class="txt">
                                <h5>拉夫劳伦t恤男正品圆领短袖...</h5>
                                <p>颜色：白色  尺码：M  数量：1</p>
                            </div>
                        </div>
                        <div class="status">待付款</div>
                        <div class="common pay">
                            <p>￥99.00</p>
                            <p>（含运费：¥10.00元）</p>
                            <p>在线支付</p>
                        </div>
                        <div class=" common action">
                            <a href="javascript:;">立即付款</a>
                            <a href="javascript:;">查看详情</a>
                            <a href="javascript:;">取消订单</a>
                        </div>
                       </li>
                       <li>
                        <div class="goods">
                            <a href="javascript:;"><img src="./uploads/order_goods_2.jpg" alt=""></a>
                            <div class="txt">
                                <h5>李宁跑步鞋男鞋空气弧李宁跑步鞋男鞋空气弧</h5>
                                <p>颜色：灰色  尺码：42  数量：1</p>
                            </div>
                        </div>
                        <div class="status">待付款</div>
                        <div class="common pay">
                            <p>￥99.00</p>
                            <p>（含运费：¥10.00元）</p>
                            <p>在线支付</p>
                        </div>
                        <div class=" common action">
                            <a href="javascript:;">立即付款</a>
                            <a href="javascript:;">查看详情</a>
                            <a href="javascript:;">取消订单</a>
                        </div>
                       </li>
                   </ul>
                </div>
               </div>
               <!-- 我的收藏 -->
               <div class="Collection panel">
                    <!-- 标题 -->
                    <div class="panel-title">
                        <!-- 左侧 -->
                        <h4>我的收藏</h4>
                        <!-- 右侧 -->
                        <a href="javascript:;">查看更多 ></a>
                    </div>
                    <!-- 商品 -->
                    <div class="goods">
                        <ul>
                            <li class="goods-item">
                                <a href="javascript:;">
                                    <div class="close"></div>
                                    <img src="./uploads/kitchen_goods_1.jpg" alt="">
                                    <p>沙宣经典洗护套装750ml送200ml</p>
                                    <p>洗护用品</p>
                                    <p class="price">￥<span>79</span></p>
                                </a>
                            </li>
                            <li class="goods-item">
                                <a href="javascript:;">
                                    <img src="./uploads/kitchen_goods_3.jpg" alt="">
                                    <p>沙宣经典洗护套装750ml送200ml</p>
                                    <p>洗护用品</p>
                                    <p class="price">￥<span>129</span></p>
                                </a>
                            </li>
                            <li class="goods-item">
                                <a href="javascript:;">
                                    <img src="./uploads/home_goods_6.jpg" alt="">
                                    <p>沙宣经典洗护套装750ml送200ml</p>
                                    <p>洗护用品</p>
                                    <p class="price">￥<span>79</span></p>
                                </a>
                            </li>
                            <li class="goods-item">
                                <a href="javascript:;">
                                    <img src="./uploads/kitchen_goods_5.jpg" alt="">
                                    <p>沙宣经典洗护套装750ml送200ml</p>
                                    <p>洗护用品</p>
                                    <p class="price">￥<span>79</span></p>
                                </a>
                            </li>
                            
                        </ul>
                    </div>
               </div>
               <!-- 我的足迹 -->
               <div class="Collection panel">
                    <!-- 标题 -->
                    <div class="panel-title">
                        <!-- 左侧 -->
                        <h4>我的足迹</h4>
                        <!-- 右侧 -->
                        <a href="javascript:;">查看更多 ></a>
                       </div>
                        <!-- 商品 -->
                    <div class="goods">
                        <ul>
                            <li class="goods-item">
                                <a href="javascript:;">
                                    <img src="./uploads/kitchen_goods_1.jpg" alt="">
                                    <p>沙宣经典洗护套装750ml送200ml</p>
                                    <p>洗护用品</p>
                                    <p class="price">￥<span>79</span></p>
                                </a>
                            </li>
                            <li class="goods-item">
                                <a href="javascript:;">
                                    <img src="./uploads/kitchen_goods_3.jpg" alt="">
                                    <p>沙宣经典洗护套装750ml送200ml</p>
                                    <p>洗护用品</p>
                                    <p class="price">￥<span>129</span></p>
                                </a>
                            </li>
                            <li class="goods-item">
                                <a href="javascript:;">
                                    <img src="./uploads/home_goods_6.jpg" alt="">
                                    <p>沙宣经典洗护套装750ml送200ml</p>
                                    <p>洗护用品</p>
                                    <p class="price">￥<span>79</span></p>
                                </a>
                            </li>
                            <li class="goods-item">
                                <a href="javascript:;">
                                    <img src="./uploads/kitchen_goods_5.jpg" alt="">
                                    <p>沙宣经典洗护套装750ml送200ml</p>
                                    <p>洗护用品</p>
                                    <p class="price">￥<span>79</span></p>
                                </a>
                            </li>
                            
                        </ul>
                    </div>
               </div>
           </div>
       </div>
     </div>

    <!-- --------------------------- 网页底部模块 -->
    <footer>
        <!-- 联系方式 -->
        <section class="xtx-contact">
            <div class="container">
                <!-- 客户服务 -->
                <dl class="customer">
                    <dt>客户服务</dt>
                    <dd class="chat">在线客服</dd>
                    <dd class="feedback">问题反馈</dd>
                </dl>
                <!-- 关注我们 -->
                <dl class="follow">
                    <dt>关注我们</dt>
                    <dd class="weixin">公众号</dd>
                    <dd class="weibo">微博</dd>
                </dl>
                <!-- 下载app -->
                <dl class="download">
                    <dt>下载APP</dt>
                    <dd class="qrcode">
                        <img src="./uploads/qrcode.png" alt="">
                    </dd>
                    <dd class="info">
                        <p>扫描二维码</p>
                        <p>立马下载APP</p>
                        <a href="javascript:;">下载页面</a>
                    </dd>
                </dl>
                  <!-- 服务热线 -->
                  <dl class="tel">
                    <dt>服务热线</dt>
                    <dd class="hotline">
                        <p>400-0000-000</p>
                        <p>周一至周日 8:00-18:00</p>
                    </dd>
                    
                </dl>
            </div>   <!--container   ending -->
        </section>  <!-- 联系方式xtx-contact   ending --> 
        <!-- 宣传服务 -->
   <section class="xtx-service">
      <div class="container">
        <a href="javascript:;">价格亲民</a>
        <a href="javascript:;">物流快捷</a>
        <a href="javascript:;">品质新鲜</a>
      </div>
   </section>
        <!-- 版权信息 -->
        <section class="xtx-copyright">
            <p>
                <a href="javascript:;">关于我们</a> |
                <a href="javascript:;">帮助中心</a> |
                <a href="javascript:;">售后服务</a> |
                <a href="javascript:;">配送与验收</a> |
                <a href="javascript:;">商务合作</a> |
                <a href="javascript:;">搜索推荐</a> |
                <a href="javascript:;">友情链接</a>
              </p>
              <p>CopyRight @ 小兔鲜儿</p>
        </section>
    </footer>

</body>
</html>